.search {
  height: 140px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  > .wrapper {
    height: 100%;
    background-color: #fff;
    > .logo {
      width: 190px;

      height: 100%;
      float: left;
      text-align: center;
      line-height: 140px;
      > img {
        width: 100%;
      }
    }
    > .search-img {
      height: 100%;
      width: 190px;

      float: right;
      text-align: center;
      line-height: 140px;
      > img {
        width: 100%;
      }
    }
    > .search-main {
      height: 100%;
      overflow: hidden;

      > .search-top {
        box-sizing: border-box;
        height: 60%;
        padding: 10px 50px;
        > .search-box {
          height: 60%;
          display: flex;
          padding: 5px 10px;
          justify-content: space-between;
          > .box-input {
            padding: 3px;
            width: 80%;
            background-color: red;
            position: relative;
            > input {
              box-sizing: border-box;
              height: 100%;
              width: 90%;
              border: 0;
              color: #ccc;
              padding: 0 15px;
            }
            > i {
              position: absolute;
              top: 6px;
              right: 70px;
              opacity: 0.5;
              > img {
                width: 20px;
              }
            }
            > span {
              width: 10%;
              height: 100%;
              position: absolute;
              top: 0;
              right: 0;
              display: flex;
              align-items: center;
              justify-content: center;

              > img {
                width: 20px;
              }
            }
            span:hover {
              background-color: rgb(209, 4, 4);
            }
          }
          > .box-shopping {
            width: 15%;
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            > i {
              width: 15%;
              padding-bottom: 5px;
              > img {
                width: 100%;
              }
            }
            > span {
              width: 60%;
              font-size: 12px;
              color: red;
            }
          }
        }
        > .search-nav {
          width: 100%;
          height: 40%;
          padding:0 10px;
          > ul {
            width: 100%;
            padding-right: 50px;
            height: 100%;
            display: flex;
            > li {
              padding-right: 10px;
              >a {
                font-size: 12px;
              }
              >a:hover{
                color: red;
              }
            }
            >li:nth-of-type(1) a{
              color: red;
            }
          }
        }
      }
      > .search-bottom {
        height: 40%;
        // background-color: purple;
        >ul{
          display: flex;
          align-items: center;
          >li{
            padding:20px 10px;
            >a{
              font-size: 16px;
            }
            >a:hover{
              color: red;
            }
            .active{
              color: red;
              font-weight: 700;
            }
            .active:hover{
              color: rgb(194, 3, 3);
            }
          }
          
        }
      }
    }
  }
}
